<template>
    <div class="order">
        <div class="tab-list flex-a">
            <div :class="tab == item.value ? 'active item' : 'item'" v-for="item in tabList" :key="item.value"
                @click="changeTab(item.value)">
                <span>{{ item.name }}</span>
                <i></i>
            </div>
        </div>
        <div class="box">
            <!-- 收入概况 -->
            <div v-if="tab == 'srgk'">
                <el-form :model="queryParams" ref="queryForm" class="input" size="small" :inline="true" label-width="68px">
                    <el-form-item>
                        <el-date-picker v-model="queryParams.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" size="mini" @click="handleQuery">查询</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="yes">昨日</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="tod">今日</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="week">本周</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="month">本月</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="jin">近7天</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="day">近30天</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-list flex-b">
                    <div :class="active == -1 ? 'active card-box' : 'card-box'" @click="clickAct(0)" v-for="item in inList"
                        :key="item.id">
                        <div class="card-title">
                            <span>{{ item.name }}</span>
                            <!-- <el-tooltip effect="dark" content="含会员卡次卡充值金额，剔除会员卡/次卡消费金额" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip> -->
                        </div>
                        <div class="total"><span>{{ item.value }}</span></div>
                        <div v-for="ele in item.mapList" :key="ele.id">
                            <div class="flex-a flex-b item">
                                <div>{{ ele.name }}</div>
                                <div>{{ ele.value }}</div>
                            </div>
                        </div>
                        <!-- <div v-if="active == -1" class="t"></div> -->
                    </div>
                </div>
                <div class="business-overview"><span class="n">{{
                    active == 0 ? '营业额分布' : active == 1 ? '营业概况' : active == 2 ? '充值分布' : active == 3 ? '充值消费' : ''
                }}</span><span class="time">{{ this.queryParams.time[0] + '至' + this.queryParams.time[1] }}</span>
                    <!-- <span class="money">金额单位：元</span> -->
                    <!-- <el-button type="primary" class="btn" size="mini" style="padding: 8px 15px;">下载</el-button> -->
                </div>
                <!-- 实际到账收款分布---表    -->
                <div v-if="active == 0">
                    <div ref="line" style="width: 100%;height: 400px;"></div>
                </div>
                <!-- <div v-if="active == 0">
                    <el-table :data="realData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="date" label="支付类型">
                        </el-table-column>
                        <el-table-column label="收银台">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="退款">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="记账本">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="支出">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="微信商城">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="支出">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="新零售">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="退款">
                            </el-table-column>
                            <template slot="header">
                                <span>新零售</span>
                                <el-tooltip effect="dark"
                                    content="新零售支出金额计入对应收入订单所属日期，例如昨日美团收入100元，今日该订单发生退款，则昨日美团收入100元，支出100元。"
                                    placement="top">
                                    <i class="el-icon-question"></i>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员">
                            <el-table-column prop="name" label="开卡">
                            </el-table-column>
                            <el-table-column label="续充">
                            </el-table-column>
                            <el-table-column label="退款">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="寄养预存">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="退款">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="预约押金">
                            <el-table-column prop="name" label="收入">
                            </el-table-column>
                            <el-table-column label="退款">
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="合计">
                        </el-table-column>
                    </el-table>
                </div> -->
                <!-- 营业概况--充值分布--充值消费---表 -->
                <div v-show="active > 0">
                    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="date" label="日期">
                        </el-table-column>
                        <el-table-column prop="yye" label="营业额（元）">
                        </el-table-column>
                        <el-table-column prop="md" label="门店营业额（元）">
                        </el-table-column>
                        <el-table-column prop="xcx" label="小程序营业额（元）">
                        </el-table-column>
                        <el-table-column prop="xls" label="新零售美团（元）">
                        </el-table-column>
                        <el-table-column prop="elm" label="新零售饿了么（元）">
                        </el-table-column>
                        <el-table-column prop="num" label="有效订单数">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 资产报告 -->
            <div v-if="tab == 'zcbg'">
                <div class="card-list flex-b">
                    <div :class="report == -1 ? 'active card-box w33' : 'card-box w33'" v-for="item in means" :key="item.id"
                        @click="clickReport(0)">
                        <div class="card-title">
                            <span>{{ item.name }}</span>
                            <!-- <el-tooltip effect="dark" content="商品总成本与活体总成本" placement="top">
                                <i class="el-icon-question"></i>
                            </el-tooltip> -->
                        </div>
                        <div class="total"><span>{{ item.value }}</span></div>
                        <div v-for="ele in item.mapList" :key="ele.id">
                            <div class="flex-a flex-b item">
                                <div>{{ ele.name }}</div>
                                <div>{{ ele.value }}</div>
                            </div>
                        </div>
                        <!-- <div v-if="report == -1" class="t"></div> -->
                    </div>
                </div>
                <!-- 库存资产 -->
                <div v-if="report == 0" class="business-overview"><span class="n">库存资产</span>
                    <!-- <span class="money">金额单位：元</span> -->
                    <!-- <el-button type="primary" class="btn" size="mini"
                        style="padding: 8px 15px;">下载</el-button> -->
                </div>
                <div class="report flex" v-if="report == 0">
                    <div class="left">
                        <el-table :data="reportData" border style="width: 50%"
                            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                            <el-table-column prop="name" label="库存分类">
                            </el-table-column>
                            <el-table-column prop="alert" label="库存数量">
                                <!-- <template slot="header">
                                    <span>库存总成本</span>
                                    <el-tooltip effect="dark" content="库存成本总价：该分类下所有商品的库存总成本之和。" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </template> -->
                            </el-table-column>
                            <!-- <el-table-column prop="address" label="库存资产占比">
                            </el-table-column> -->
                        </el-table>
                    </div>
                    <div class="right">
                        <div ref="pie" style="width: 600px;height: 400px;"></div>
                    </div>
                </div>
                <!-- 会员卡余额 -->
                <div v-if="report == 1" class="card-money">
                    <el-form :model="queryParams" ref="queryForm" class="input" size="small" :inline="true"
                        label-width="68px">
                        <el-form-item>
                            <el-select v-model="queryParams.topCate" @change="changeClass" placeholder="请选择会员卡">
                                <el-option v-for="item in cardList" :key="item.id" :label="item.name" :value="item.id + ''">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryParams.name" style="width:340px" prefix-icon="el-icon-search"
                                placeholder="请输入会员姓名/手机号查询" clearable @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="btn" size="mini" @click="handleQuery">查询</el-button>
                            <el-button type="primary" class="btn" size="mini">导出</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="card-title">持卡人数<span>0</span>人，卡数<span>0</span>张</div>
                    <el-table :data="cardData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="date" label="会员卡编号">
                        </el-table-column>
                        <el-table-column prop="yye" label="会员卡名称">
                        </el-table-column>
                        <el-table-column prop="md" label="会员姓名">
                        </el-table-column>
                        <el-table-column prop="xcx" label="会员所属店铺">
                        </el-table-column>
                        <el-table-column prop="xls" label="会员手机号">
                        </el-table-column>
                        <el-table-column prop="elm" label="卡内总余额">
                        </el-table-column>
                        <el-table-column prop="num" label="赠送余额">
                        </el-table-column>
                        <el-table-column prop="num" label="有效期">
                        </el-table-column>
                        <el-table-column prop="num" label="开卡时间">
                        </el-table-column>
                    </el-table>
                    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList" />
                </div>
                <!-- 次卡余额/次数 -->
                <div v-if="report == 1" class="card-money">
                    <el-form :model="queryParams" ref="queryForm" class="input" size="small" :inline="true"
                        label-width="68px">
                        <el-form-item>
                            <el-select v-model="queryParams.topCate" @change="changeClass" placeholder="请选择会员卡">
                                <el-option v-for="item in cardList" :key="item.id" :label="item.name" :value="item.id + ''">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryParams.name" style="width:340px" prefix-icon="el-icon-search"
                                placeholder="请输入持卡会员姓名/手机号查询" clearable @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="btn" size="mini" @click="handleQuery">查询</el-button>
                            <el-button type="primary" class="btn" size="mini">导出</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="card-title">持卡人数<span>0</span>人，卡数<span>0</span>张</div>
                    <el-table :data="cardData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="date" label="次卡名称">
                        </el-table-column>
                        <el-table-column prop="yye" label="会员姓名">
                        </el-table-column>
                        <el-table-column prop="md" label="会员所属店铺">
                        </el-table-column>
                        <el-table-column prop="xcx" label="会员手机号">
                        </el-table-column>
                        <el-table-column prop="xls" label="卡内总余额">
                        </el-table-column>
                        <el-table-column prop="elm" label="赠送余额">
                        </el-table-column>
                        <el-table-column prop="num" label="有效期">
                        </el-table-column>
                        <el-table-column prop="num" label="开卡时间">
                        </el-table-column>
                    </el-table>
                    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                        @pagination="getList" />
                </div>
            </div>
            <!-- 利润报告 -->
            <div v-if="tab == 'lrbg'">
                <el-form :model="queryParams" ref="queryForm" class="input" size="small" :inline="true" label-width="68px">
                    <el-form-item>
                        <el-date-picker v-model="queryParams.time" value-format="yyyy-MM-dd" type="datetimerange"
                            :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="btn" size="mini" @click="handleQuery">查询</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">昨日</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">今日</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">本周</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">本月</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">近7天</el-button>
                        <el-button type="primary" class="btn-plain" size="mini" @click="handleQuery">近30天</el-button>
                    </el-form-item>
                </el-form>
                <div class="card-list flex-b">
                    <div class="card-box white">
                        <div class="card-title">
                            <span>总收入</span>
                        </div>
                        <div class="total"><span>0.00</span>元</div>
                        <div class="flex-a flex-b item">
                            <div>销售收入</div>
                            <div>0.00元</div>
                        </div>
                        <div class="flex-a flex-b item">
                            <div>非销售收入</div>
                            <div>0.00元</div>
                        </div>
                    </div>
                    <div class="card-box white">
                        <div class="card-title">
                            <span>营业总成本</span>
                        </div>
                        <div class="total"><span>0.00</span>元</div>
                        <div class="flex-a flex-b item">
                            <div>销售成本</div>
                            <div>0.00元</div>
                        </div>
                        <div class="flex-a flex-b item">
                            <div>非销售成本</div>
                            <div>0.00元</div>
                        </div>
                    </div>
                    <div class="card-box white">
                        <div class="card-title">
                            <span>总利润</span>
                        </div>
                        <div class="total"><span>0.00</span>元</div>
                    </div>
                    <div class="card-box white">
                        <div class="card-title">
                            <span>销售毛利</span>
                        </div>
                        <div class="total"><span>0.00</span>元</div>
                    </div>
                </div>
                <div class="buiness-data">
                    营业数据 <span>2023-04-26</span>
                </div>
                <div class="buiness-list flex-b">
                    <div :class="type == 0 ? 'active buiness-item' : 'buiness-item'" @click="clickType(0)">
                        <div>销售收入</div>
                        <div>0.00 <span>元</span></div>
                        <i class="t"></i>
                    </div>
                    <div :class="type == 1 ? 'active buiness-item' : 'buiness-item'" @click="clickType(1)">
                        <div>有效订单</div>
                        <div>0<span>单</span></div>
                        <i class="t"></i>
                    </div>
                    <div :class="type == 2 ? 'active buiness-item' : 'buiness-item'" @click="clickType(2)">
                        <div>客单价</div>
                        <div>0.00 <span>元</span></div>
                        <i class="t"></i>
                    </div>
                    <div :class="type == 3 ? 'active buiness-item' : 'buiness-item'" @click="clickType(3)">
                        <div>商品成本</div>
                        <div>0.00 <span>元</span></div>
                        <i class="t"></i>
                    </div>
                    <div :class="type == 4 ? 'active buiness-item' : 'buiness-item'" @click="clickType(4)">
                        <div>销售毛利</div>
                        <div>0.00 <span>元</span></div>
                        <i class="t"></i>
                    </div>
                    <div :class="type == 5 ? 'active buiness-item' : 'buiness-item'" @click="clickType(5)">
                        <div>毛利率</div>
                        <div>0.00 <span>%</span></div>
                        <i class="t"></i>
                    </div>
                </div>
                <div ref="line2" style="width:100%;height: 400px;"></div>
                <div class="business-overview"><span class="n">门店利润概况</span><span class="time">2023-04-26</span><el-button
                        type="primary" class="btn" size="mini" style="padding: 8px 15px;">下载</el-button></div>
                <div>
                    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center' }">
                        <el-table-column prop="date" label="日期">
                        </el-table-column>
                        <el-table-column prop="yye" label="销售收入">
                        </el-table-column>
                        <el-table-column prop="md" label="有效订单数">
                        </el-table-column>
                        <el-table-column prop="xcx" label="客单价">
                        </el-table-column>
                        <el-table-column prop="xls" label="商品成本">
                        </el-table-column>
                        <el-table-column prop="elm" label="销售毛利">
                        </el-table-column>
                        <el-table-column prop="num" label="毛利率 %">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import { getMap, getProMap } from '@/api/pet/report'
export default {
    name: "Order",
    data() {
        return {
            total: 0,
            tab: 'srgk',
            active: 0,
            report: 0,
            type: 0,
            inList: [],
            tabList: [
                {
                    name: '收入概况',
                    value: 'srgk'
                },
                {
                    name: '资产报告',
                    value: 'zcbg'
                },
                // {
                //     name: '利润报告',
                //     value: 'lrbg'
                // },
            ],
            means: [],
            realData: [],
            reportData: [],
            cardList: [],
            cardData: [],
            tableData: [
                {
                    date: '平均值（统计时间内平均）',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '0点-1点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '1点-2点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '2点-3点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '3点-4点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '4点-5点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '5点-6点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '6点-7点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '7点-8点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '8点-9点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '9点-10点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '10点-11点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '11点-12点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '12点-13点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '13点-14点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '14点-15点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '15点-16点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '16点-17点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '17点-18点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '18点-19点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '19点-20点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '20点-21点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '21点-22点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '22点-23点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '23点-24点',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
                {
                    date: '合计值',
                    yye: '0',
                    md: '0',
                    xcx: '0',
                    xls: '0',
                    elm: '0',
                    num: '0'
                },
            ],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                time: []
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },
    created() {
        this.queryParams.time = [this.formatDate(new Date()), this.formatDate(new Date())]
    },
    mounted() {
        this.getMap()
    },
    watch: {
        "queryParams.time": {
            handler(newVal, oldVal) {
                console.log(newVal);
                this.getMap()
            }
        }
    },
    methods: {
        formatDate(date) {
            var year = date.getFullYear()
            var month = this.format(date.getMonth() + 1)
            var da = this.format(date.getDate())
            // var h = this.format(date.getHours())
            // var m = this.format(date.getMinutes())
            // var s = this.format(date.getSeconds())
            // return year + '-' + month + '-' + da + ' ' + h + ':' + m + ':' + s
            return year + '-' + month + '-' + da
        },
        format(val) {
            return Number(val) < 10 ? '0' + val : '' + val
        },
        getMap() {
            getMap({ beginTime: this.queryParams.time[0], endTime: this.queryParams.time[1] }).then(res => {
                if (res.code == 200) {
                    this.inList = res.data.order
                    this.$nextTick(() => {
                        this.drawLine(res.data.line)
                    })
                }
            })
        },
        getProMap() {
            getProMap().then(res => {
                if (res.code == 200) {
                    this.means = res.data.order
                    this.reportData = res.data.list
                    let pie = res.data.pie, arr = []
                    pie.forEach(item => {
                        arr.push({ name: item.name, value: item.alert })
                    })
                    this.$nextTick(() => {
                        this.drawPie(arr)
                    })
                }
            })
        },
        //昨日
        yes() {
            let date = this.formatDate(new Date(new Date().getTime() - 24 * 60 * 60 * 1000))
            this.queryParams.time = [date, date]
        },
        //今日
        tod() {
            let date = this.formatDate(new Date())
            this.queryParams.time = [date, date]
        },
        //本周
        week() {
            let date = this.formatDate(new Date(new Date().getTime() - (new Date().getDay() - 1) * 24 * 60 * 60 * 1000))
            this.queryParams.time = [date, this.formatDate(new Date())]
        },
        //本月
        month() {
            let date = this.formatDate(new Date(new Date().getTime() - (new Date().getDate() - 1) * 24 * 60 * 60 * 1000))
            this.queryParams.time = [date, this.formatDate(new Date())]
        },
        // 近7天
        jin() {
            let date = this.formatDate(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000))
            this.queryParams.time = [date, this.formatDate(new Date())]
        },
        //近30天
        day() {
            let date = this.formatDate(new Date(new Date().getTime() - 29 * 24 * 60 * 60 * 1000))
            this.queryParams.time = [date, this.formatDate(new Date())]
        },
        // tab切换
        changeTab(value) {
            this.tab = value
            if (value == 'zcbg') {
                this.getProMap()
            } else if (value == 'srgk') {
                this.getMap()
            } else if (value == 'lrbg') {
                this.$nextTick(() => {
                    this.drawLine2()
                })
            }
        },
        clickAct(index) {
            // this.active = index
            // if (index == 0) {
            //     this.$nextTick(() => {
            //         this.drawLine()
            //     })
            // }
        },
        clickReport(index) {
            // this.report = index
            // if (index == 0) {
            //     this.$nextTick(() => {
            //         this.drawPie()
            //     })
            // }
        },
        clickType(index) {
            this.type = index
        },
        /** 搜索按钮操作 */
        handleQuery() {
            // this.queryParams.pageNum = 1;
            // this.getList();
            this.getMap()
        },
        drawPie(data) {
            var option;
            option = {
                title: {
                    text: '库存数量占比',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    // x: 'right',
                    // y: 'center',
                    left: 500
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            var myChart = echarts.init(this.$refs.pie);
            option && myChart.setOption(option);
        },
        drawLine(data) {
            var option, legend = [], res = data.series
            res.forEach(item => {
                legend.push(item.name)
            })
            option = {
                title: {
                    text: '营业额趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: data.series
            };
            var myChart = echarts.init(this.$refs.line);
            option && myChart.setOption(option);
        },
        drawLine2() {
            var option;

            option = {
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    }
                ]
            };
            var myChart = echarts.init(this.$refs.line2);
            option && myChart.setOption(option);
        },
    }
};
</script>
<style lang="scss" scoped>
.box {
    .card-list {
        .card-box.w33 {
            width: 32.5%;
        }

        .card-box {
            width: 24.2%;
            border-radius: 10px;
            background: #F2F2F2;
            position: relative;
            padding: 20px 20px 12px;
            border: 1px solid #E6E6E6;

            .card-title {
                text-align: center;
                color: #333336;
                font-size: 16px;
                font-weight: bold;
                line-height: 24px;

                span {
                    margin-right: 5px;
                }
            }

            .total {
                text-align: center;
                color: #333336;
                font-size: 14px;
                line-height: 36px;
                margin: 8px 0 12px;

                span {
                    font-size: 24px;
                    margin-right: 5px;
                }
            }

            .item {
                width: 100%;
                line-height: 46px;
                border-top: 2px dashed #E6E6E6;
            }

            .t {
                position: absolute;
                bottom: -16px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border: 8px solid transparent;
                border-top-color: #FFE000;
            }
        }

        .card-box.active {
            background: #fff;
            border-color: #FFE000;
        }

        .card-box.white {
            background: #fff;
        }
    }

    .business-overview {
        padding: 15px 0;
        font-size: 18px;
        color: #333336;
        margin: 5px 0 20px;

        .time {
            font-size: 14px;
            margin: 0 18px 0 8px;
        }

        .money {
            font-size: 14px;
            margin: 0 18px 0 8px;
            color: #a6a6a6;
        }
    }

    .report {
        .left {
            width: 50%;
        }

        .right {
            width: 50%;
        }
    }

    .card-money {
        margin: 20px 0 10px;

        .card-title {
            font-size: 16px;
            line-height: 26px;
            font-weight: bold;
            margin: 0 0 15px;

            span {
                margin: 0 6px;
                font-style: normal;
                color: #f8645c;
            }
        }
    }

    .buiness-data {
        padding: 25px 0 15px;
        font-size: 18px;
        color: #333336;

        span {
            font-size: 14px;
            margin: 0 15px;
        }
    }

    .buiness-list {
        margin-bottom: 20px;

        .buiness-item {
            width: 16%;
            border-radius: 10px;
            background: #F2F2F2;
            position: relative;
            padding: 20px 20px 12px;
            border: 1px solid #E6E6E6;

            div:first-child {
                text-align: center;
                color: #333336;
                font-size: 16px;
                font-weight: bold;
                line-height: 24px;
            }

            div:nth-child(2) {
                font-family: Roboto-Medium;
                text-align: center;
                color: #333336;
                font-size: 24px;
                line-height: 36px;
                margin: 8px 0 12px;

                span {
                    font-family: PingFang;
                    margin-left: 5px;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                }
            }

        }

        .buiness-item.active {
            background: #fff;
            border-color: #FFE000;

            .t {
                position: absolute;
                bottom: -16px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border: 8px solid transparent;
                border-top-color: #FFE000;
            }
        }
    }
}
</style>